import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    ScrollView,
    Dimensions,
    ToastAndroid,
    ActivityIndicator,
    NativeModules
} from 'react-native';
// import { PullView } from 'react-native-pull';
import { PullView } from 'react-native-pull_hqw'; // tiangui修改的版本
import { is_null_or_undefined, isEmptyObject } from '../util/MyUtil';
import { MatchScreen } from '../util/MatchScreen';


const { _Width, _Height } = Dimensions.get('window');

export default class PullViewExample extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            refreshing: false,
            topicParent: {},
            topicChildren: [],
        };
        this.onPullRelease = this.onPullRelease;
        this.topIndicatorRender = this.topIndicatorRender;
    }

    topIndicatorRender(pulling, pullok, pullrelease) {
        const hide = { position: 'absolute', left: 10000 };
        const show = { position: 'relative', left: 0 };
        if (pulling) {
            this.txtPulling && this.txtPulling.setNativeProps({ style: show });
            this.txtPullok && this.txtPullok.setNativeProps({ style: hide });
            this.txtPullrelease && this.txtPullrelease.setNativeProps({ style: hide });
        } else if (pullok) {
            this.txtPulling && this.txtPulling.setNativeProps({ style: hide });
            this.txtPullok && this.txtPullok.setNativeProps({ style: show });
            this.txtPullrelease && this.txtPullrelease.setNativeProps({ style: hide });
        } else if (pullrelease) {
            this.txtPulling && this.txtPulling.setNativeProps({ style: hide });
            this.txtPullok && this.txtPullok.setNativeProps({ style: hide });
            this.txtPullrelease && this.txtPullrelease.setNativeProps({ style: show });
        }
        return (
            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 60 }}>
                <ActivityIndicator size="small" color="gray" />
                <Text ref={(c) => {
                    this.txtPulling = c;
                }}>下拉刷新...</Text>
                <Text ref={(c) => {
                    this.txtPullok = c;
                }}>松开刷新...</Text>
                <Text ref={(c) => {
                    this.txtPullrelease = c;
                }}>玩命刷新中...</Text>
            </View>
        );
    }

    onPullRelease(resolve) {
        //do something
        this.timer = setTimeout(() => {
            resolve();
        }, 5000); // test
    }

    onPress1() {
        console.log('AAA-btn-1'); 
        // NativeModules.MyRN.toastPackageName();
        NativeModules.RNPatch.setScrollViewContentOffset(0);
        this.pullView.scrollTo({x: 0, y: 0.5, animated: false});
    }

    onPress2() {
        console.log('AAA-btn-2'); 
        // NativeModules.MyRN.toastString('ABC');
        NativeModules.RNPatch.setScrollViewContentOffset(100);
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={{width: _Width, height: 20}} />
                <Button title='btn-1' onPress={this.onPress1.bind(this)} />
                <Text style={{width: _Width, height: 20}} />
                <Button title='btn-2' onPress={this.onPress2.bind(this)} />
                <Text style={{width: _Width, height: 20}} />

                <PullView style={{ width: _Width }}
                          ref={(c) => {this.pullView = c;}} 
                          onPullRelease={this.onPullRelease.bind(this)}
                          topIndicatorRender={this.topIndicatorRender.bind(this)}
                          topIndicatorHeight={60}
                          nativeID='TopicHomePage_PullView'>
                    {this.renderList(this.state.topicChildren)}
                </PullView>
            </View>
        );
    }

    componentDidMount() {
        console.log('AAA-componentDidMount');

        // this.fetchData(this.props.data.url);
        
        // this.pullView.scrollTo({x: 0, y: 1, animated: false});
        // setTimeout(()=>this.pullView.scrollTo({x: 0, y: 0.5, animated: false}), 100);
    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer);
    }

    renderList(arr) {
        let tmpArr = [];
        for (let i = 0; i < 20; i++) {
            tmpArr.push(
                <View style={styles.itemContainer}
                    key={i}>
                    <Text style={styles.textStyle}>
                        item_{i+1}
                    </Text>
                </View>
            );
        }
        return tmpArr;
    }

    fetchData(url) {
        fetch(url, BaseUrl.requestHeaders)
            .then((response) => response.json())
            .then((responseJson) => {
                if (responseJson.code == 200) {
                    this.setState({
                        topicParent: responseJson.data.topic_parent,
                        topicChildren: responseJson.data.topic_children,
                    });
                    ToastAndroid.show('获取数据成功', ToastAndroid.SHORT);
                }
            });
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#e2e2e2'
    },
    itemContainer: {
        width: _Width,
        height: 100,
        backgroundColor: '#e2e2e2',
        alignItems: 'center',
        justifyContent: 'center',
    },
    textStyle: {
        color: 'blue',
        fontSize: MatchScreen(30),
        marginTop: MatchScreen(10),
    },
    imgStyle: {
        width: MatchScreen(180),
        height: MatchScreen(130),
        marginTop: MatchScreen(20),
        marginLeft: MatchScreen(20)
    },
});
